<!--
 * @Descripttion: 
 * @version: 
 * @Author: 尹伊
 * @Date: 2020-12-19 12:22:07
 * @LastEditors: 尹伊
 * @LastEditTime: 2020-12-29 15:42:32
-->
<template>
  <div class="monitor-page">
    <!-- 检索框 -->
    <div class="search-box">
      <div class="search-input">
        <i class="el-icon-search" style="margin-right: 3px;"></i><span>内容检索</span>
      </div>
      <el-form :model='searchForm' ref='monitorForm' :inline='true' class="search-form">
        <el-form-item prop='taskName' label='任务名称:'>
          <el-input v-model.tram="searchForm.taskName" @keyup.enter.native='handleSearchForm' @clear='handleClearValue'
            clearable style="width: 194px;" size='small' placeholder='请输入任务名称'>
          </el-input>
        </el-form-item>
        <el-form-item prop='runResult' label='执行结果:'>
          <el-select v-model="searchForm.runResult" @keyup.enter.native='handleSearchForm' @clear='handleClearValue'
            style="width: 194px;" clearable size='small' placeholder="请选择执行状态">
            <el-option :label="item.label" :value="item.value" v-for='(item,index) in resultList' :key='item.value'>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='操作时间:'>
          <el-date-picker v-model="searchForm.operTimeStart" :value-format='dataParam.valueFormat'
            :type='dataParam.dateType' :format='dataParam.dateFormat' clearable style="width: 194px;" size='small'
            type="date" placeholder="开始时间">
          </el-date-picker>
          <el-date-picker v-model="searchForm.operTimeEnd" :value-format='dataParam.valueFormat'
            :type='dataParam.dateType' :format='dataParam.dateFormat' clearable style="width: 194px;" size='small'
            type="date" placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size='small' icon="el-icon-search" @click="handleSearchForm('monitorForm')">搜索</el-button>
          <el-button size='small' icon='el-icon-refresh-right' @click="handleResetForm">重置</el-button>
          <el-button size='small' @click="handleWaitForm('monitorForm')" type="primary">等待任务</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 监控任务 -->
    <div class="monitor-box">
      <div class="title">
        <i class="el-icon-s-fold"></i>
        <span>监控任务</span>
      </div>
      <el-table :data="tableData" @row-click='handleRowClick' :row-class-name="tableRowClassName"
        @sort-change='handleSortChange' v-loading='tableLoading' style="width: 100%;cursor: pointer;"
        height='"calc(100% - 30px)'>
        <el-table-column type="index" label="序号" width="50" align='center'></el-table-column>
        <el-table-column prop="taskName" label="任务名称" show-overflow-tooltip width="250"></el-table-column>
        <el-table-column prop="operType" label="操作类型" align='center' width='120' :formatter='formatOperate'>
        </el-table-column>
        <el-table-column prop="operUser" label="操作用户" align='center'></el-table-column>
        <el-table-column prop="operTimeStart" sortable='custom' label="操作开始时间" align='center'></el-table-column>
        <el-table-column prop="operTimeEnd" label="操作结束时间" align='center'></el-table-column>
        <el-table-column prop="runResult" sortable='custom' label="执行结果" width='100' align='center'>
          <template slot-scope="scope">
            <span class="ivu-badge-status-dot" :class='handleClass(scope.row.runResult)'></span>{{scope.row.runResult |
            formateOperate}}
          </template>
        </el-table-column>
        <el-table-column prop="msg" label="信息" align='center'></el-table-column>
        <el-table-column label="执行日志" align='center'>
          <template slot-scope="scope">
            <span style="cursor: pointer; color:#ff7635" @click='handleCheckDetail(scope.row)'>查看详情</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pagination-class" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pageParams.page" :page-sizes="[10, 20, 30, 40]" :page-size="pageParams.pagesize"
        layout="total, sizes, prev, pager, next" :total="pageTotal">
      </el-pagination>
    </div>
    <!-- 子任务列表 -->
    <div class="subtask-box">
      <div class="title">
        <i class="el-icon-s-fold"></i>
        <span>子任务列表</span> <span v-if='currentTitle'>{{currentTitle}}</span>
      </div>
      <!-- 子任务列表数据 -->
      <div class="childTask">
        <!-- 任务列表 -->
        <div class="task-list">
          <div class="task-title">任务列表</div>
          <div class="child-list" v-loading='taskListLoading'>
            <div v-if='taskList.length'>
              <div class="item" :class='currentSubTask.id == item.id ? "checked-row" : ""'
                @click='handleClickTask(item)' v-for='(item,index) in taskList' :key='index'>
                {{item.taskName}}</div>
            </div>
            <div v-else class="no-data">暂无内容</div>
          </div>
        </div>
        <!-- 表格 -->
        <div class="task-table">
          <el-form :model='searchFile' ref='searchFile' :inline='true' class="search-form">
            <el-form-item prop='fileName' label='文件名称:'>
              <el-input v-model.tram="searchFile.fileName" @keyup.enter.native='handleSearchFile'
                @clear='handleClearFile' clearable style="width: 194px;" size='small' placeholder='请输入文件名称'>
              </el-input>
            </el-form-item>
            <el-form-item prop='upUser' label='上传用户:'>
              <el-input v-model.tram="searchFile.upUser" @keyup.enter.native='handleSearchFile' @clear='handleClearFile'
                clearable style="width: 194px;" size='small' placeholder='请输入UM号'>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button size='small' icon="el-icon-search" @click="handleSearchFile">搜索</el-button>
              <el-button size='small' icon='el-icon-refresh-right' @click="handleResetFile">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="childTaskTable" v-loading='fileLoading' :header-row-class-name='"header-class"'
            style="width: 100%" height='"calc(100% - 30px)'>
            <el-table-column type="index" label="序号" width="50" align='center'></el-table-column>
            <el-table-column prop="fileName" label="文件名称" show-overflow-tooltip width="250"></el-table-column>
            <el-table-column prop="fileType" label="文件类型" width='80' align='center'>
            </el-table-column>
            <el-table-column prop="fileSize" label="文件大小" align='center'></el-table-column>
            <el-table-column prop="upUser" label="上传用户" align='center'></el-table-column>
            <el-table-column prop="upTime" label="上传时间" align='center'></el-table-column>
            <el-table-column label="操作" align='center'>
              <template slot-scope="scope">
                <span style="cursor: pointer; color:#ff7635" @click='handleDownload(scope.row)'>下载</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination class="pagination-class" @size-change="changeFilePagesize" @current-change="changeFilePage"
            :current-page="pageData.page" :page-sizes="[10, 20, 30, 40]" :page-size="pageData.pagesize"
            layout="total, sizes, prev, pager, next" :total="fileTotal">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 执行日志弹窗 -->
    <el-dialog :visible.sync="errorDialog" :before-close='handleBClose' :modal-append-to-body='false' width='500px'
      class='journal_class'>
      <div class="file_holder">
        <div class="file_header">执行日志</div>
        <div class="file_content" v-html='errorMessage'></div>
      </div>
    </el-dialog>
    <!-- 待处理任务列表 Pending -->
    <el-dialog :visible.sync="pendingDialog" :show-close='false' @before-close='handleBClose'
      :modal-append-to-body='false' width='900px' custom-class='pend-class'>
      <div class="title">
        <i class="el-icon-s-fold"></i>
        <span>待处理任务列表</span>
        <i class="el-icon-close close-icon" @click='handleCosleDialog'></i>
      </div>
      <el-form :model='pendingForm' ref='pendingForm' :inline='true' class="pendging-class">
        <el-form-item prop='taskName' label='任务名称:'>
          <el-input v-model.tram="pendingForm.taskName" @keyup.enter.native='handleSearchPending' clearable
            style="width: 194px;" size='small' placeholder='请输入任务名称'>
          </el-input>
        </el-form-item>
        <el-form-item prop='joinTime' label='加入时间:'>
          <el-date-picker v-model="pendingForm.joinTime" value-format='yyyy-MM-dd' :type='dataParam.dateType'
            :format='dataParam.dateFormat' clearable style="width: 194px;" size='small' type="date"
            placeholder="请选择加入时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size='small' icon="el-icon-search" @click="handleSearchPending">搜索</el-button>
          <el-button size='small' icon='el-icon-refresh-right' @click="handleResetPending">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="pendging-box">
        <el-table :data="pengdingTaskTable" class="pending-table" v-loading='pendingLoading' ref='pengdingTaskTable'
          border :header-row-class-name='"header-class"' style="width: 100%">
          <el-table-column type="index" label="序号" width="50" align='center'></el-table-column>
          <el-table-column prop="taskName" label="任务名称" show-overflow-tooltip width="250"></el-table-column>
          <el-table-column prop="taskNum" label="待处理任务数" width='110' align='center'></el-table-column>
          <el-table-column prop="statusText" label="状态" width='85' align='center'>
            <template slot-scope="scope">
              <div class="status-class"><span class="pendingC"></span>{{scope.row.statusText}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="joinUser" label="加入用户" align='center'></el-table-column>
          <el-table-column prop="joinTime" label="加入时间" align='center'></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import axios from 'axios'
  import { generateQueryParams } from '@/factory/jaz'
  import qs from 'qs'
  export default {
    name: 'monitorPage',
    data() {
      return {
        searchContent: '',
        searchForm: {
          taskName: '',
          runResult: '',
          operTimeStart: '',
          operTimeEnd: ''
        },
        searchFile: {
          fileName: '',
          upUser: ''
        },
        pendingForm: {
          taskName: '',
          joinTime: ''
        },
        errorDialog: false,
        errorMessage: '',
        pendingDialog: false,
        tableLoading: false,
        taskListLoading: false,
        currentTitle: '',
        currentRow: {},
        currentSubTask: {},
        resultList: [
          { label: '等待处理', value: '00' },
          { label: '处理中', value: '01' },
          { label: '处理成功', value: '02' },
          { label: '处理失败', value: '03' },
        ],
        pageParams: {
          page: 1,
          pagesize: 10,
        },
        pageData: {
          page: 1,
          pagesize: 10,
        },
        dataParam: {
          dateType: 'date',
          dateFormat: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd'
        },
        sortname: 'operTimeStart',
        sortorder: 'desc',
        pageTotal: 0,
        fileTotal: 0,
        taskList: [],
        childTaskTable: [],
        pengdingTaskTable: [],
        oldPengdingTaskTable: [],
        pendingLoading: false,
        fileLoading: false,
        tableData: []
      }
    },
    filters: {
      formateOperate(val) {
        switch (val) {
          case '00': return '等待处理'
          case '01': return '处理中';
          case '05': return '处理失败';
          case '02': return '处理成功';
        }
      },
    },
    watch: {
      'searchForm.operTimeStart'(val) {
        if (!val) {
          this.handleClearValue()
        }
      },
      'searchForm.operTimeEnd'(val) {
        if (!val) {
          this.handleClearValue()
        }
      },
      'pendingForm.taskName'(val) {
        if (!val) {
          this.handleWaitForm()
        }
      },
      'pendingForm.joinTime'(val) {
        if (!val) {
          this.handleWaitForm()
        }
      }
    },
    created() {
      this.getMainMonitorTask()
    },
    methods: {
      // 清空数据
      handleClearValue() {
        this.pageParams.page = 1
        this.getMainMonitorTask()
      },
      handleClearFile() {
        this.pageData.page = 1
        this.getMonitorList()
      },
      // 获取表数据
      getMainMonitorTask() {
        this.tableData = []
        let condition = generateQueryParams(this.searchForm)
        const params = {
          page: this.pageParams.page,
          pagesize: this.pageParams.pagesize,
          sortname: this.sortname,
          sortorder: this.sortorder,
          condition: JSON.stringify(condition)
        }
        let config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        this.tableLoading = true
        axios.post('/api/annals/pab/admin/monitor', qs.stringify(params), config).then(res => {
          let result = res.data
          if (result && result.code == 0) {
            this.tableData = result.Rows
            this.pageTotal = result.Total
          }
          this.tableLoading = false
        }).catch(err => {
          this.tableLoading = false
          console.log(err, 'err')
        })
      },
      handleClass(val) {
        switch (val) {
          case '00': return '.ivu-badge-status-processing-waitingC';
          case '01': return 'ivu-badge-status-processing';
          case '05': return 'ivu-badge-status-processing-failC';
          case '02': return 'ivu-badge-status-processing-completeC';
        }
      },
      handleSortChange(column, prop, order) {
        this.sortname = column.prop
        this.sortorder = column.order == 'ascending' ? 'asc' : 'desc'
        this.getMainMonitorTask()
      },
      // 点击样式
      tableRowClassName({ row, rowIndex }) {
        if (this.currentRow.id == row.id) {
          return 'checked-row'
        }
        return ''
      },
      // 点击行
      handleRowClick(row, column, event) {
        this.currentRow = row
        this.currentTitle = row.taskName
        this.taskList = []
        this.childTaskTable = []
        this.taskListLoading = true
        axios.get(`/api/annals/pab/admin/monitor/ref?id=${row.id}`).then(res => {
          let result = res.data
          if (result && result.code == 0) {
            this.taskList = result.data
          }
          this.taskListLoading = false
        }).catch(err => {
          this.taskListLoading = false
        })
      },
      // 点击子任务列表
      handleClickTask(item) {
        this.currentSubTask = item
        this.getMonitorList()
      },
      // 获取任务附件表格
      getMonitorList() {
        this.childTaskTable = []
        let condition = generateQueryParams(this.searchFile)
        const params = {
          page: this.pageData.page,
          pagesize: this.pageData.pagesize,
          condition: JSON.stringify(condition)
        }
        this.fileLoading = true
        axios.post(`/api/annals/pab/admin/monitor/list?id=${this.currentSubTask.id}`, qs.stringify(params)).then(res => {
          let result = res.data
          if (result && result.code == 0) {
            this.childTaskTable = result.Rows
            this.fileTotal = result.Total
          }
          this.fileLoading = false
        }).catch(err => {
          this.fileLoading = false
        })
      },
      handleBClose() {
        this.errorMessage = ''
        this.errorDialog = false
      },
      // 查看详情
      handleCheckDetail(data) {
        this.errorDialog = true
        this.errorMessage = data.err
      },
      formatOperate(row, column) {
        switch (row.operType) {
          case '02':
            return 'PBC附件任务'
        }
      },
      formatFileType(row, column) {
        switch (row.fileType) {
          case 1: return 'docx';
          case 2: return 'doc';
          case 3: return 'xlsx';
          case 4: return 'xlx';
          case 5: return 'pdf';
        }
      },
      handleSearchForm() {
        this.pageParams.page = 1
        this.pageParams.pagesize = 10
        this.getMainMonitorTask()
      },
      handleResetForm() {
        this.$refs.monitorForm.resetFields()
        this.searchForm.operTimeEnd = ''
        this.searchForm.operTimeStart = ''
        this.handleSearchForm()
      },
      // 附件表分页处理
      changeFilePage(val) {
        this.pageData.page = val
        this.getMonitorList()
      },
      changeFilePagesize() {
        this.pageData.page = 1
        this.pageData.pagesize = val
        this.getMonitorList()
      },
      // 附件列表搜索
      handleSearchFile() {
        this.pageData.page = 1
        this.pageData.pagesize = 10
        this.getMonitorList()
      },
      // 待处理任务搜索
      handleSearchPending() {
        let arr = []
        if (this.pendingForm.taskName && !this.pendingForm.joinTime) {
          this.oldPengdingTaskTable.map(item => {
            if (item.taskName.indexOf(this.pendingForm.taskName) != -1) {
              arr.push(item)
            }
          })
        } else if (!this.pendingForm.taskName && this.pendingForm.joinTime) {
          this.oldPengdingTaskTable.map(item => {
            if (item.joinTime.indexOf(this.pendingForm.joinTime) != -1) {
              arr.push(item)
            }
          })
        } else if (this.pendingForm.taskName && this.pendingForm.joinTime) {
          this.oldPengdingTaskTable.map(item => {
            if (item.joinTime.indexOf(this.pendingForm.joinTime) != -1 && item.taskName.indexOf(this.pendingForm.taskName) != -1) {
              arr.push(item)
            }
          })
        } else {
          arr = JSON.parse(JSON.stringify(this.oldPengdingTaskTable))
        }
        this.pengdingTaskTable = arr
      },
      // 待处理任务重置
      handleResetPending() {
        this.$refs.pendingForm.resetFields()
        this.pengdingTaskTable = JSON.parse(JSON.stringify(this.oldPengdingTaskTable))
      },
      // 附件列表重置
      handleResetFile() {
        this.$refs.searchFile.resetFields()
        this.getMonitorList()
      },
      // 下载接口
      handleDownload(data) {
        window.location.href = `/api/annals/pab/jaz/download-save?fileName=${encodeURI(data.filePath)}&name=${encodeURI(data.fileName)}`
      },
      handleWaitForm() {
        this.pengdingTaskTable = []
        this.oldPengdingTaskTable = []
        this.pendingDialog = true
        this.pendingLoading = true
        axios.get('/api/annals/pab/admin/redis/list').then(res => {
          let result = res.data
          if (result && result.code == 0) {
            result.Rows.map(item => {
              item.taskNum = item.taskId.length
              item.statusText = '待处理'
            })
            this.pengdingTaskTable = result.Rows
            this.oldPengdingTaskTable = result.Rows
          }
          this.pendingLoading = false
        }).catch(err => {
          this.pendingLoading = false
          console.log(err, '待处理任务接口错误')
        })
      },
      handleCosleDialog() {
        this.pendingDialog = false
      },
      handleSearchContent() {
        console.log('内容检索')
      },
      handleSizeChange(val) {
        this.pageParams.page = 1
        this.pageParams.pagesize = val
        this.getMainMonitorTask()
      },
      handleCurrentChange(val) {
        this.pageParams.page = val
        this.getMainMonitorTask()
      }

    },
  }
</script>
<style scoped lang="scss">
  @import './index.css'
</style>